<template>
    <div id="container">
        <div id="viewDiv1" :style="{zIndex:viewDiv1_index}"></div>
        <div id="viewDiv2" :style="{zIndex:viewDiv2_index}"></div>
        <div style="position:absolute;left:20px;top:50px;z-index:1000">
            <el-button size="large" :circle="true" @click="click" >{{button_text}}</el-button>
            <!--创建一个按钮,点击按钮时切换2D与3D视图,同时按钮上面的文字也随之改变-->
        </div>
    </div>
  </template>
    
  <script setup>
  import Map from '@arcgis/core/Map.js'
  import MapView from '@arcgis/core/views/MapView.js'
  import SceneView from '@arcgis/core/views/SceneView.js'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer' 
  import {onMounted,ref} from 'vue'
  const viewDiv1_index=ref(100)
  const viewDiv2_index=ref(200)//利用css的z-index的属性,切换2D与3D视图
  const button_text=ref('2D')
  var map,view1,view2,active,sync,views
  function click(){//点击按钮时调整两种视图的z-index属性,同时调整按钮文本
    viewDiv1_index.value=viewDiv1_index.value===100?200:100
    viewDiv2_index.value=viewDiv2_index.value===100?200:100
    button_text.value=button_text.value==="2D"?"3D":"2D"
  }
  var layer=new FeatureLayer({
    url:"https://ws8575.club/web/rest/services/Hosted/山东省市界_玉米小麦大米产量_面要素_要素图层_3857/FeatureServer/0",
    renderer:{
      type:"simple",
      symbol:{
        type:"simple-fill",
        color:[200,50,50,0.2],
        outline:{
          color:[0,0,0],
          width:0.5
        }
      }
    }
  })
  onMounted(()=>{
    map = new Map({//创建地图对象
      basemap: "satellite",
      layers:[layer]
    })
    view1 = new SceneView({//创建3D视图对象
      container: "viewDiv1",
      map: map,
    })
    view2 = new MapView({//创建2D视图对象
      container:"viewDiv2",
      map: map,
    })
    view1.ui.remove(["zoom","attribution","navigation-toggle","compass"])
    view2.ui.remove(["zoom","attribution"])
    views = [view1, view2]
    sync = (source) => {
      if (!active || !active.viewpoint || active !== source) {
        return;
      }
      for (const view of views) {
        if (view !== active) {
          view.viewpoint = active.viewpoint
        }
      }
    }
    for (const view of views) {
      view.watch(["interacting", "animation"], () => {
        active = view
        sync(active)
      });
      view.watch("viewpoint", () => sync(view));
    }
    view1.when(()=>{
      view1.goTo({
        target:layer.fullExtent,
        zoom:5
      })
    })
  })
  </script>
    
  <style scoped>
  #viewDiv1,#viewDiv2,#container{
    height:100%;width:100%;padding:0;margin:0;background-color:white;
    /*👆👆不设置背景会出问题*/
  }
  #viewDiv1,#viewDiv2{
    position:absolute;top:0px;left:0px
  }
  #tool_box{
    position:absolute;left:10px;top:10px;;z-index:10000;
  }
  </style>
  